import { useEffect, useState,useRef } from 'react'
import useLocalStorageState from './useLocalStorageState';

function App() {
  const ref = useRef();
  const STORAGE_NAME = 'app_theme'
  const ADDRESS_STORAGE_NAME = 'address'
  const defaultValue = {
    theme:'前端',
    address:'范家'
  }
  // localStorage 中？  
  // const [value,setValue] = useState(() => {
  //   const storage = localStorage.getItem(STORAGE_NAME);
  //   return storage || '';
  // })
  const [value,setValue] = useLocalStorageState(STORAGE_NAME,
    defaultValue)
  const [address,setAddress] = useLocalStorageState(ADDRESS_STORAGE_NAME,
    defaultValue)
  // const changeValue = (value) => {
  //   setValue(value)
  //   // localStorage.setItem(STORAGE_NAME,value);
  // }
  const [testA,setTestA] = useState('a');
  useEffect(() => {
    setTestA('b');
    ref.current = 'b';
    console.log(testA,ref.current);
  },[])
  return (
    <div className="App">
      {testA}
     <input value={value} onChange={e => setValue(
      {theme:e.target.value})}/>
     <input value={address} onChange={e => setAddress(
      {address:e.target.value})}/>
    </div>
  )
}

export default App
